<template>
  <!-- 添加或修改主题对话框 -->
  <el-dialog :title="dialog.title" :model-value="dialog.visible" @update:model-value="(val) => emit('update:dialog', { ...dialog, visible: val })" width="800px" append-to-body>
    <el-form ref="topicFormRef" :model="form" :rules="rules" label-width="120px">
      <el-tabs v-model="activeTab">
        <!-- 基本信息 -->
        <el-tab-pane label="基本信息" name="basic">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="主题名称" prop="topicName">
                <el-input v-model="form.topicName" placeholder="请输入主题名称" :disabled="form.topicId !== ''" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主题类型" prop="topicType">
                <el-select v-model="form.topicType" placeholder="请选择主题类型" style="width: 100%">
                  <el-option label="系统主题" value="system" />
                  <el-option label="设备主题" value="device" />
                  <el-option label="用户主题" value="user" />
                  <el-option label="广播主题" value="broadcast" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="QoS等级" prop="qosLevel">
                <el-select v-model="form.qosLevel" placeholder="请选择QoS等级" style="width: 100%">
                  <el-option label="QoS 0 - 最多一次" value="0" />
                  <el-option label="QoS 1 - 至少一次" value="1" />
                  <el-option label="QoS 2 - 只有一次" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="0">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="保留消息" prop="retainMessage">
                <el-switch v-model="form.retainMessage" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限控制" prop="accessControl">
                <el-switch v-model="form.accessControl" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="主题描述" prop="description">
            <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入主题描述" />
          </el-form-item>
        </el-tab-pane>

        <!-- 高级配置 -->
        <el-tab-pane label="高级配置" name="advanced">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="消息过期时间" prop="messageExpiry">
                <el-input-number v-model="form.messageExpiry" :min="0" :max="86400" placeholder="秒" style="width: 100%" />
                <div class="form-tip">0表示永不过期</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大消息长度" prop="maxMessageSize">
                <el-input-number v-model="form.maxMessageSize" :min="1" :max="1048576" placeholder="字节" style="width: 100%" />
                <div class="form-tip">最大1MB</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="最大订阅数" prop="maxSubscribers">
                <el-input-number v-model="form.maxSubscribers" :min="1" :max="10000" placeholder="个" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="消息限流" prop="messageRateLimit">
                <el-input-number v-model="form.messageRateLimit" :min="0" :max="10000" placeholder="条/秒" style="width: 100%" />
                <div class="form-tip">0表示不限流</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="消息持久化" prop="persistent">
                <el-switch v-model="form.persistent" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="消息压缩" prop="compressed">
                <el-switch v-model="form.compressed" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="主题模式" prop="topicPattern">
            <el-input v-model="form.topicPattern" placeholder="支持通配符 + 和 #" />
            <div class="form-tip">+ 匹配单级，# 匹配多级</div>
          </el-form-item>
          <el-form-item label="扩展配置" prop="extendConfig">
            <el-input v-model="form.extendConfig" type="textarea" :rows="4" placeholder="请输入扩展配置（JSON格式）" />
          </el-form-item>
        </el-tab-pane>

        <!-- 权限配置 -->
        <el-tab-pane label="权限配置" name="permission">
          <el-form-item label="发布权限" prop="publishPermission">
            <el-checkbox-group v-model="form.publishPermission">
              <el-checkbox label="admin">管理员</el-checkbox>
              <el-checkbox label="device">设备</el-checkbox>
              <el-checkbox label="user">普通用户</el-checkbox>
              <el-checkbox label="guest">访客</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="订阅权限" prop="subscribePermission">
            <el-checkbox-group v-model="form.subscribePermission">
              <el-checkbox label="admin">管理员</el-checkbox>
              <el-checkbox label="device">设备</el-checkbox>
              <el-checkbox label="user">普通用户</el-checkbox>
              <el-checkbox label="guest">访客</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="IP白名单" prop="ipWhitelist">
            <el-input v-model="form.ipWhitelist" type="textarea" :rows="3" placeholder="请输入IP地址，多个用换行分隔" />
          </el-form-item>
          <el-form-item label="客户端ID白名单" prop="clientIdWhitelist">
            <el-input v-model="form.clientIdWhitelist" type="textarea" :rows="3" placeholder="请输入客户端ID，多个用换行分隔" />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

// Props
interface Props {
  dialog: {
    visible: boolean
    title: string
  }
  form: any
  rules: any
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits(['update:dialog', 'update:form', 'submit', 'cancel'])

// 响应式数据
const topicFormRef = ref()
const activeTab = ref('basic')

// 监听对话框状态变化
watch(() => props.dialog.visible, (newVal) => {
  if (newVal) {
    activeTab.value = 'basic'
  }
})

// 处理提交
const handleSubmit = () => {
  topicFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      emit('submit')
    }
  })
}

// 处理取消
const handleCancel = () => {
  emit('cancel')
}
</script>

<style scoped>
.form-tip {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.dialog-footer {
  text-align: right;
}
</style>